<template>
  <div id="app" :class="[borderCls]">
    <div ref="ruler" class="app-ruler"></div>
    <router-view></router-view>
  </div>
</div>
</template>

<script>
const FastClick = require('fastclick')
const u = navigator.userAgent


export default {
  name: 'app',
  data () {
    return {
      ua: {
        isIos: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
        isAndroid: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
        isWx: u.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'
      },
      deviceRatio: window.devicePixelRatio
    }
  },
  computed: {
    borderCls () {
      if (this.deviceRatio != 1) {
        if (this.ua.isIos) {
          return 'border-ios2'
        } else {
         return 'border-android'
        }
      }
    }
  },
  created () {
    this.$root.fastclick = FastClick.attach(document.body)
    this.$root._screenWidth = window.screen.width
    this.$root.ua = this.ua
  }

}
</script>

<style lang="stylus">
@import "./vars.styl"

/*
 * reset.css
 */
*
  margin 0
  padding 0
  box-sizing border-box
  -webkit-tap-highlight-color transparent
html
  line-height 1.1
  font-size 20px
  color $fc3
  background $bg
body
  -webkit-touch-callout none
  -webkit-user-select none
  user-select none
  // font-family PingFang-SC-Regular
  font-family -apple-system , BlinkMacSystemFont , "Segoe UI" , Roboto , "Segoe UI" , "Helvetica Neue", "PingFang SC", "Noto Sans" , "Noto Sans CJK SC" , "Microsoft YaHei" , "微软雅黑" , sans-serif
pre
  // font-family PingFang-SC-Regular
  font-family -apple-system , BlinkMacSystemFont , "Segoe UI" , Roboto , "Segoe UI" , "Helvetica Neue", "PingFang SC", "Noto Sans" , "Noto Sans CJK SC" , "Microsoft YaHei" , "微软雅黑" , sans-serif
::-webkit-scrollbar
  display none
input
  -webkit-appearance none
  outline none
  
/*
 * util class
 */
body.popup-open
  .view__body
    overflow hidden!important
.toe
  text-overflow ellipsis
  overflow hidden
  line-height normal
  white-space nowrap
.tar
  text-align right

/*
 * border system
 */
.bordered
  border-width 1px
.border-avatar
  border-color #f6f6f6
.border-theme
  border-color $theme
.border-theme-light
  border-color #5cc571
.border-theme-gray
  border-color #d6d6d6
.border-999
  border-color #999
.border-bbb
  border-color #bbb
.border-ccc
  border-color #ccc
.border-ddd
  border-color #ddd
.border-eee
  border-color #eee
.border-fff
  border-color #fff
.border-ac
  border-color #acacac
&.border-ios2
  .bordered
    border-width 0.5px
&.border-android
  .border-avatar
    border-color alpha(#f6f6f6,0.6)
  .border-theme
    border-color alpha($theme,0.6)
  .border-theme-light
    border-color alpha(#5cc571,0.6)
  .border-999
    border-color alpha(#999,0.6)
  .border-bbb
    border-color alpha(#bbb,0.6)
  .border-ccc
    border-color alpha(#ccc,0.6)
  .border-ddd
    border-color alpha(#ddd,0.6)
  .border-eee
    border-color alpha(#eee,0.6)
  .border-fff
    border-color alpha(#fff,0.6)
  .border-ac
    border-color alpha(#acacac,0.6)
/*
 * app config
 */  
#app
  font-size 0.8rem
  position fixed
  left 0
  right 0
  top 0
  bottom 0
  .app-ruler
    position fixed
    top 0
    right 0
    left 0
    bottom 0
    z-index -999
  a
    text-decoration none
  pre
    white-space pre-wrap
  .app-back-btn
    width 72px
    height 45px
    text-align left
    padding-left 12px
    margin-left -12px
  .app-right-btn
    width 100%
    text-align right
  .view
    display flex
    flex-direction column
    height 100%
    position absolute
    z-index 1
    left 0
    right 0
    top 0
    background $bg
    .mint-header
      flex 0 0 auto
    .view__body
      flex 1 1
      -webkit-overflow-scrolling touch
      overflow scroll
      height 100%
      &.fix1
        position relative
        .mint-loadmore
          position absolute
          left 0
          right 0
    .view__footer
      flex 0 0 auto
  .btn--big
    padding 6px 12px
    display block
    > div
      width 270px
      margin 0 auto
      background $theme
      text-align center
      font-size 16px
      color #fff
      border-radius $round-corner
      line-height 44px
      &.disabled
        background alpha($theme,0.6)

/*
 * Mint-UI override
 */


@media screen and (-webkit-min-device-pixel-ratio 2)
  .mint-cell:before
    -webkit-transform scaleY(.5)
    transform scaleY(.5)
</style>
